<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/chopsui/chops-user-input.html">

<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/neon-animation/web-animations.html">

<link rel="import" href="../../elements/som-input-styles.html">
<link rel="import" href="../../elements/som-utility-styles.html">

<dom-module id="som-file-bug">
  <template>
    <style include="som-input-styles som-utility-styles">
      .buttons {
        margin-top: 1em;
      }

      .buttons button {
        font-size: 1.1em;
      }

      chops-user-input {
        display: block;
      }
    </style>
    <paper-dialog id="fileBugDialog" with-backdrop>
      <h2>File a new bug</h2>
      <div class="error">[[_fileBugErrorMessage]]</div>
      <paper-dialog-scrollable>
        <paper-input id="summary" label="Summary" value="[[summary]]"></paper-input>
        <chops-user-input id="cc" label="CC" input-value="[[_arrayToString(cc)]]" suggestions="[[ccSuggestions]]"
          on-input="_ccChanged" on-user-selected="_ccUserSelected" multiple></chops-user-input>
        <paper-dropdown-menu id="priority" label="Priority" value="{{priority}}" alwaysFloatLabel>
          <paper-listbox class="dropdown-content" slot="dropdown-content" attr-for-selected="label">
            <template is="dom-repeat" items="[[priorities]]">
              <paper-item label="[[item.label]]">
                [[item.displayName]]
              </paper-item>
            </template>
          </paper-listbox>
        </paper-dropdown-menu>

        <paper-dropdown-menu id="projectId" label="Project" value="{{projectId}}" always-float-label>
          <paper-listbox class="dropdown-content" slot="dropdown-content">
            <template is="dom-repeat" items="[[projectIds]]">
              <paper-item>
                [[item.label]]
              </paper-item>
            </template>
          </paper-listbox>
        </paper-dropdown-menu>

        <paper-input id="labels" label="Labels (separate by commas)" value="[[_arrayToString(labels)]]"></paper-input>
        <paper-textarea id="description" always-float-label label="Description" value="[[description]]">
        </paper-textarea>
      </paper-dialog-scrollable>
      <div class="buttons">
        <button dialog-dismiss>
          Close
        </button>
        <button class="emphasized" on-tap="_fileBug">File Bug</button>
      </div>
    </paper-dialog>



    <paper-dialog id="bugFiledDialog" with-backdrop>
      <div>
        Successfully linked new bug
        <a href$="https://crbug.com/[[projectId]]/[[filedBugId]]" target="_blank">
          Bug [[filedBugId]]</a> to alert.
      </div>
      <div class="buttons">
        <button dialog-dismiss>
          Close
        </button>
      </div>
    </paper-dialog>
  </template>
  <script src="som-file-bug.js"></script>
  <dom-module>